<template>
  <div class="store">
<!-- 关于查询的表单   -->
    <el-form :inline="true" :model="storeForm" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
      <!-- :inline默认展示  :model对象，用来存取数据-->
      <!--库位编码-->
      <el-form-item label="库位编码" class="selectMB10">
        <el-input size="mini" v-model="storeForm.code" placeholder="请输入库位编码"></el-input>
      </el-form-item>
      <!--库位名称-->
      <el-form-item label="库位名称" class="selectMB10">
        <el-input size="mini" v-model="storeForm.name" placeholder="请输入库位名称"></el-input>
      </el-form-item>
      <!--库区编码-->
      <el-form-item label="库区编码" class="selectMB10">
        <el-input size="mini" v-model="storeForm.areaCode" placeholder="请输入库区编码"></el-input>
      </el-form-item>
      <!--库区名称-->
      <el-form-item label="库区名称" class="selectMB10">
        <el-input size="mini" v-model="storeForm.areaName" placeholder="请输入库区名称"></el-input>
      </el-form-item>
      <!--库房编码-->
      <el-form-item label="库房编码" class="selectMB10">
        <el-input size="mini" v-model="storeForm.roomCode" placeholder="请输入库房编码"></el-input>
      </el-form-item>
      <!--库房名称-->
      <el-form-item label="库房名称" class="selectMB10">
        <el-input size="mini" v-model="storeForm.roomName" placeholder="请输入库房名称"></el-input>
      </el-form-item>
      <!--当前状态-->
      <el-form-item :label="nowLangue.currentState" class="selectMB10">
        <el-select size="mini" clearable v-model="storeForm.status" :placeholder="nowLangue.pleaseSelect" style="width:90px;" >
          <el-option v-for="(aaa,index) in statusLists" :key="index" :label="aaa.label" :value="aaa.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="selectMB10">
        <!--查询-->
        <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="queryStoreSheet()" v-text="nowLangue.query"></el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <label class="default-label">库区明细列表：</label>
    <!--新增按钮-->
    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="createNew()">新增</el-button>
    <el-table :data="storeData" border style="width: 100%;" v-loading.body="loading" element-loading-text="小韩正在来的路上">
      <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
      <el-table-column label="操作" header-align="center" align="center" width="100">
        <template scope="scope">
          <div class="operationItem bolder" v-if="scope.row.status" @click="handleStatus(scope.$index,scope.row)">禁用</div>
          <div class="operationItem bolder" v-else @click="handleStatus(scope.$index,scope.row)">启用</div>
          <div class="operationItem disabled bolder" v-if="scope.row.status">修改</div>
          <div class="operationItem bolder" v-else @click="handleUpdate(scope.$index,scope.row)">修改</div>
        </template>
      </el-table-column>

      <el-table-column prop="statusName" label="状态" :formatter="stateChange" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
      <el-table-column prop="code" label="库位编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="库位名称" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="areaCode" label="库区编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="areaName" label="库区名称" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="areaRemark" label="库区描述" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="roomCode" label="库房编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="roomName" label="库房名称" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="roomRemark" label="库房描述" header-align="center" show-overflow-tooltip></el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber"></el-pagination>
    <!--新建弹窗-->
      <el-dialog title="新增库位信息" :visible.sync="dialogForm1Visible" size="small" :lock-scroll="false">
      <el-form :inline="true" :model="addStoreForm" class="demo-form-inline" style="border-bottom:1px solid #ccc;" ref="addStoreForm">
        <el-form-item label="库房编码" prop="roomCode"  :rules="[{ required: true, message: '库房编码不能为空'},{ max: 20, message: '最多不可超过20字符'}]" :label-width="labelWidth">
          <el-select v-model="addStoreForm.roomCode" @change="selectedroomCode">
            <el-option v-for="(roomMesg,index) in roomMesgLists" :key="index" :label="roomMesg.name" :value="roomMesg.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库房名称" :label-width="labelWidth">
          <el-input  v-model.trim="addStoreForm.roomName" placeholder="请输入库房名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="库区编码" prop="areaCode"  :rules="[{ required: true, message: '库区编码不能为空'},{ max: 20, message: '最多不可超过20字符'}]" :label-width="labelWidth">
          <el-select v-model="addStoreForm.areaCode" @change="selectedareaCode">
            <el-option v-for="(areaMesg,index) in areaMesgLists" :key="index" :label="areaMesg.name" :value="areaMesg.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库区名称" :label-width="labelWidth">
          <el-input  v-model.trim="addStoreForm.areaName" placeholder="请输入库区名称" disabled></el-input>
        </el-form-item>
      </el-form>
    <!--表格-->
    <label class="default-label">库位明细列表：</label>
    <!--新增按钮-->
    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="handleAddCreate">新增</el-button>
    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="handleAddSave">保存</el-button>
    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="handleAddSAE">保存并退出</el-button>
    <el-table :data="storeAddForm" border style="width: 100%;">
      <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
      <el-table-column label="操作" header-align="center" align="center" width="50">
        <template scope="scope">
          <div class="operationItem bolder"  @click="handleAddDel(scope.$index,storeAddForm)">删除</div>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="库位编码" header-align="center" show-overflow-tooltip>
        <template scope="scope">
          <el-input size="mini" class="code" v-model.number="scope.row.code" placeholder="请输入库位编码" v-if="scope.row.id" disabled></el-input>
          <el-input size="mini" class="code" v-model.number="scope.row.code" placeholder="请输入库位编码" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="库位名称" header-align="center" show-overflow-tooltip>
        <template scope="scope">
          <el-input size="mini" class="name" v-model.number="scope.row.name" placeholder="请输入库位名称" v-if="scope.row.id" disabled></el-input>
          <el-input size="mini" class="name" v-model.number="scope.row.name" placeholder="请输入库位名称" v-else></el-input>
        </template>
      </el-table-column>
    </el-table>
    </el-dialog>
    <!--修改弹窗-->
    <el-dialog title="修改库位库位" :visible.sync="dialogForm2Visible" size="small" :lock-scroll="false">
      <el-form :inline="true" :model="updateStoreForm" class="demo-form-inline" style="border-bottom:1px solid #ccc;" ref="updateStoreForm">
        <el-form-item label="库位编码" :label-width="labelWidth">
          <el-input  v-model.trim="updateStoreForm.code" disabled></el-input>
        </el-form-item>
        <el-form-item label="库位名称" prop="name"  :rules="[{ required: true, message: '库位名称不能为空'},{ max: 200, message: '最多不可超过200字符'}]" :label-width="labelWidth">
          <el-input  v-model.trim="updateStoreForm.name" :title="updateStoreForm.name"></el-input>
        </el-form-item>
        <el-form-item label="库区编码" :label-width="labelWidth">
          <el-input  v-model.trim="updateStoreForm.areaCode" placeholder="请输入库区编码" disabled></el-input>
        </el-form-item>
        <el-form-item label="库区名称" :label-width="labelWidth">
          <el-input  v-model.trim="updateStoreForm.areaName" placeholder="请输入库区名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="库区描述" :label-width="labelWidth">
          <el-input  v-model="updateStoreForm.areaRemark" placeholder="请输入库区描述" disabled></el-input>
        </el-form-item>
        <el-form-item label="库房编码" :label-width="labelWidth">
          <el-input  v-model.trim="updateStoreForm.roomCode" placeholder="请输入库房编码" disabled></el-input>
        </el-form-item>
        <el-form-item label="库房名称" :label-width="labelWidth">
          <el-input  v-model.trim="updateStoreForm.roomName" placeholder="请输入库房名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="库房描述" :label-width="labelWidth">
          <el-input  v-model="updateStoreForm.roomRemark" placeholder="请输入库房描述" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="handleUpdateSave1">确定</el-button>
        <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="handleUpdateCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowLangue:{
        storeRoom:"库房"
      },
      storeAddForm:{
        code:"",
        name:""
      },
      updateStoreForm:{
        roomCode:"",
        roomName:"",
        areaCode:"",
        areaName:"",
        areaRemark:"",
        roomRemark:"",
        name:"",
        code:"",
        remark:"",
        status:false
      },
      // 查询表单
      storeForm:{
        name:"",
        code:"",
        status:"",
        remark:"",
        areaCode:"",
        areaName:"",
        roomCode:"",
        roomName:""
      },
      areaMesgLists:[],
      roomMesgLists:[],
      statusLists:[],   //当前状态下拉列表
      labelWidth:"100px",
      addStoreForm:{
        name:"",
        code:"",
        status:false,
        remark:"",
        areaCode:"",
        areaName:"",
        roomCode:"",
        roomName:"",
        storageBinValueList:[]
      },
      updateSparestoreForm:{
        name:"",
        code:"",
        status:false,
        remark:"",
        version:""  //verion版本控制
      },
      storeData:[],
      loading:false,
      disabled:false,


      //弹窗
      dialogForm1Visible:false,
      dialogForm2Visible:false,
      // 分页
      isPaging:false,
      pageIndex:1,    //当前页（必传）
      pageSize :10,   //每页多少条
      totalNumber: 20,
      totalPage:2,

      //查询禁用
      selectDisabled:false,
      saveSSDisabled:false,    //新增弹窗中保存操作按钮的禁用
      saveUSSDisabled:false   //修改弹窗中保存操作按钮的禁用
    };
  },
  created:function(){
    var _this=this;
    _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
  },
  computed:{
    // powerData(){
    //     return this.$store.state.powerData;
    // },
    languageType(){
      return this.$store.state.languageType;
    }
  },
  watch:{
    languageType(){
      var _this=this;
      _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
      this.stateChange();
    }
  },
  //进入页面立即运行此方法
  mounted: function () {
    var _this = this;
    _this.$store.commit('currentActive', 'store');
    // //ajax前后查询按钮禁用
    // $(".selectAll").ajaxStart(function(){
    //     _this.selectDisabled=true;
    // });
    // $(".selectAll").ajaxStop(function(){
    //     _this.selectDisabled=false;
    // });
    _this.dropDownValue();// 当前状态下拉列表
    _this.queryStoreSheet();    //表单查询
    _this.storeRoomDown();    //表单查询
  },
  methods:{
    //点击修改
    handleUpdate(index,row){
      var _this=this;
      _this.dialogForm2Visible=true;
      if(this.$refs['updateStoreForm']) {
        this.$refs['updateStoreForm'].resetFields();
      }
      _this.updateStoreForm.id = row.id;
      _this.updateStoreForm.name = row.name;
      _this.updateStoreForm.code = row.code;
      _this.updateStoreForm.areaName = row.areaName;
      _this.updateStoreForm.areaCode = row.areaCode;
      _this.updateStoreForm.areaRemark = row.areaRemark;
      _this.updateStoreForm.roomCode = row.roomCode;
      _this.updateStoreForm.roomName = row.roomName;
      _this.updateStoreForm.roomRemark = row.roomRemark;
    },
    //修改取消
    handleUpdateCancel(){
      var _this=this;
      _this.dialogForm2Visible=false;
    },
    //修改保存
    handleUpdateSave1(){
      var _this=this;
      _this.$refs["updateStoreForm"].validate((valid) => {
        if (valid) {
          var tmp={
            code:_this.updateStoreForm.code,
            name:_this.updateStoreForm.name
          };
          $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:18082/store/update",
            cache: false,
            data:JSON.stringify(tmp),
            dataType:'JSON',
            contentType: "application/json;charset=utf-8",
            success: function (data) {
              if (data.success) {
                _this.common.successTip("修改成功！");
                _this.dialogForm2Visible=false;
                _this.queryStoreSheet();
              }else
                _this.common.errorTip(data.message);
            }
          });
        } else {
          _this.common.errorTip("存在未填写的必填项！");
          return false;
        }
      });
    },
    // 列表显示的状态转化
    stateChange(row) {
      if (row.status === 1) {
        return '启用'
      } else  {
        return '禁用'
      }
    },
    // 弹窗的库房编码=====》库房名称及描述
    selectedroomCode(){
      var _this = this;
      if (_this.roomMesgLists.size()===1){
        _this.addStoreForm.roomName=_this.roomMesgLists[0].name;
        _this.addStoreForm.roomCode=_this.roomMesgLists[0].code;
        _this.areaDropDown();
      }
      for(var i=0;i<_this.roomMesgLists.length;i++){
        if(_this.addStoreForm.roomCode == _this.roomMesgLists[i].code){
          _this.addStoreForm.roomName=_this.roomMesgLists[i].name;
          _this.addStoreForm.roomCode=_this.roomMesgLists[i].code;
          // _this.addStoreForm.roomId=_this.roomMesgLists[i].id;
          _this.areaDropDown();
        }
      }
      _this.addStoreForm = [];
    },
    // 新建窗口中的新增按钮
    handleAddCreate(){
      var _this = this;
      _this.storeForm.push({
        code:"",
        name:"",
        status:true
      });
    },
    // 新建窗口 的删除
    handleAddDel(index,rows){
      rows.splice(index,1);
    },
    // 新建窗口中的保存按钮
    handleAddSave(){
      var _this = this;
      _this.addSureFlag = false;
      _this.handleAddSaveWhPosition();
    },
    // 新建窗口中的保存并退出按钮
    handleAddSAE(){
      var _this = this;
      _this.addSureFlag = true;
      _this.handleAddSaveWhPosition();
    },
    //新建保存
    handleAddSaveWhPosition(){
      var _this=this;
      var store = _this.storeAddForm;
      _this.$refs["addStoreForm"].validate((valid) => {
        if (valid) {
          if(_this.storeAddForm && _this.storeAddForm.length){
            var tmp={roomCode:_this.addWhPositionForm.roomCode, areaCode:_this.addWhPositionForm.areaCode,store};
            $.ajax({
              type: 'POST',
              url: "http://127.0.0.1:18082/store/add",
              cache: false,
              data:JSON.stringify(tmp),
              dataType:'JSON',
              contentType: "application/json;charset=utf-8",
              success: function (data) {
                if (data.success) {
                  _this.common.successTip("保存成功！");
                  if(_this.addSureFlag){
                    _this.dialogForm1Visible=false;
                  }
                  _this.queryStoreSheet();
                }else{
                  _this.common.errorTip(data.message);
                }
              }
            });
          }else{
            _this.common.errorTip("库位明细不能为空，请新增！");
          }
        } else {
          _this.common.errorTip("存在未填写的必填项！");
          return false;
        }
      });
    },
    // 弹窗的库区编码=====》库区名称及描述
    selectedareaCode(){
      var _this = this;
      for(var i=0;i<_this.areaMesgLists.length;i++){
        if(_this.addStoreForm.areaCode === _this.areaMesgLists[i].code){
          _this.addStoreForm.areaName=_this.areaMesgLists[i].name;
          _this.storeDown();
        }
      }
      _this.addStoreForm = [];
    },
    //根据库区code查看库位信息
    storeDown(){
      var _this=this;
      $.ajax({
        type: 'GET',
        url: 'http://127.0.0.1:18082/common/store?areaCode=' + _this.addStoreForm.areaCode,
        cache: false,
        // data:JSON.stringify(tmp),
        dataType: 'JSON',
        contentType: "application/json;charset=utf-8",
        success: function (data) {
          if (data.success) {
            _this.addStoreForm = data.data;
          } else {
            _this.common.errorTip(data.message);
          }
        }
      })
    },
    // 新增弹窗库区信息
    areaDropDown(){
      var _this=this;
      $.ajax({
        type:'GET',
        url:'http://127.0.0.1:18082/common/storeAreaSee?storeRoomCode='+_this.addStoreForm.roomCode,
        cache:false,
        // data:JSON.stringify(tmp),
        dataType:'JSON',
        contentType:"application/json;charset=utf-8",
        success:function(data){
          if(data.success){
            _this.areaMesgLists=data.data;
          }else{
            _this.common.errorTip(data.message);
          }
        }
      })
    },
    // 当前状态下来列表
    dropDownValue(){
      var _this=this;
      var tmp=["status"];
      $.ajax({
        type:'POST',
        url:_this.metadata_service+'metadata/getPullDownList',
        cache:false,
        data:JSON.stringify(tmp),
        dataType:'JSON',
        contentType:"application/json;charset=utf-8",
        success:function(data){
          if(data.success){
            _this.statusLists=data.data.status;

          }else{
            _this.common.errorTip(data.message);
          }
        }
      })
    },
    //查询列表
    queryStoreSheet(){
      var _this=this;
      _this.loading=true;
      var tmp={
        name:_this.storeForm.name,
        roomName:_this.storeForm.roomName,
        areaName:_this.storeForm.areaName,
        code:_this.storeForm.code,
        roomCode:_this.storeForm.roomCode,
        areaCode:_this.storeForm.areaCode,
        status:_this.storeForm.status,
        pageIndex:_this.pageIndex,
        pageSize:_this.pageSize
      };
      _this.selectDisabled=true;
      $.ajax({
        type: 'POST',
        url: "http://127.0.0.1:18082/store/queryPage",
        cache: false,
        data:JSON.stringify(tmp),
        dataType:'JSON',
        contentType: "application/json;charset=utf-8",
        success: function (data) {
          if (data.success) {
            _this.loading=false;
            _this.isPaging=true;
            _this.totalPage=data.data.totalPage;
            _this.totalNumber=data.data.totalNumber;
            _this.storeData=data.data.dataList;

          }else{
            _this.common.errorTip(data.message)
          }
          _this.selectDisabled=false;
        }
      });
    },
    //新增
    createNew(){
      var _this=this;
      _this. storeRoomDown();
      _this.dialogForm1Visible=true;
      if(this.$refs['addStoreForm']) {
        this.$refs['addStoreForm'].resetFields();
      }
      _this.addStoreForm.name="";
      _this.addStoreForm.code="";
      _this.addStoreForm.areaCode="";
      _this.addStoreForm.areaName="";
      _this.addStoreForm.roomCode="";
      _this.addStoreForm.roomName="";
      _this.addStoreForm.storageBinValueList=[];
      _this.addStoreForm=[];
    },
    //新建保存
    saveSpareSubclass(){
      var _this=this;
      _this.$refs["storeForm"].validate((valid) => {
        if (valid) {
          var tmp={
            name:_this.addStoreForm.name,   //去除税码两边的空格
            code:_this.addStoreForm.code,
            status:_this.addStoreForm.status,
            remark:_this.addStoreForm.remark
          };
          _this.saveSSDisabled=true;
          $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:18082/store/add",
            cache: false,
            data:JSON.stringify(tmp),
            dataType:'JSON',
            contentType: "application/json;charset=utf-8",
            success: function (data) {
              if (data.success) {
                var success=_this.languageType=="zh"?'保存成功':'Save Success';
                _this.common.successTip(success);
                _this.dialogForm1Visible=false;
                _this.queryStoreSheet();
              }else{
                _this.common.errorTip(data.message);
              }
              _this.saveSSDisabled=false;
            }
          });
        } else {
          var  err=_this.common.formErrorInfo();
          _this.common.errorTip(err);
          return false;
        }
      });
    },
    //新建取消
    cancelSpareSubclass(){
      var _this=this;
      _this.dialogForm1Visible=false;
      if(this.$refs['addStoreForm']) {
        this.$refs['addStoreForm'].resetFields();
      }
      _this.addStoreForm.name="";
      _this.addStoreForm.code="";
      _this.addStoreForm.remark="";
      _this.addStoreForm.status=false;
      _this.addStoreForm.remark="";
    },
    // 操作启用禁用
    handleStatus(index, row){
      var _this=this;
      if(row.status ){
        row.status = 0;
      }else{
        row.status = 1;
      }
      var tmp={id: row.id,status: row.status};
      $.ajax({
        type: 'POST',
        url: "http://127.0.0.1:18082/store/updateStatus",
        cache: false,
        data:JSON.stringify(tmp),
        dataType:'JSON',
        contentType: "application/json;charset=utf-8",
        success: function (data) {
          if (data.success) {
            // 当前状态的显示
            if(row.status){
              row.statusName = "启用";
              var success=_this.languageType=="zh"?'启用成功':'Enable success';
              _this.common.successTip(success);
            }else{
              row.statusName = "禁用";
              var success=_this.languageType=="zh"?'禁用成功':'Disable success';
              _this.common.successTip(success);
            }
          }else
            _this.common.errorTip(data.message);
        }
      });
    },
    //点击修改
    updateCorFact(index,row){
      var _this=this;
      _this.dialogForm2Visible=true;
      if(this.$refs['updateSparestoreForm']) {
        this.$refs['updateSparestoreForm'].resetFields();
      }
      _this.updateSparestoreForm.id = row.id;
      _this.updateSparestoreForm.name = row.spareName;
      _this.updateSparestoreForm.code = row.spareCode;
      _this.updateSparestoreForm.status = row.status;
      _this.updateSparestoreForm.remark = row.description;
      _this.updateSparestoreForm.version = row.version;
    },

    //   分页
    handleSizeChange(val) {
      var _this=this;
      _this.pageSize=val;
      _this.queryStoreSheet();

    },
    storeRoomDown(){
      var _this=this;
      $.ajax({
        type:'GET',
        url:'http://127.0.0.1:18082/common/storeRoomSee?legalpersonCode=',
        cache:false,
        // data:JSON.stringify(tmp),
        dataType:'JSON',
        contentType:"application/json;charset=utf-8",
        success:function(data){
          if(data.success){
            _this.roomMesgLists=data.data;
          }else{
            _this.common.errorTip(data.message);
          }
        }
      })
    },
    //点击页码分页查询点击事件
    handleCurrentChange(val) {
      var _this=this;
      _this.pageIndex=val;
      _this.queryStoreSheet();
    }
  }
}
</script>

<style scoped>

</style>